<template>
  <div class="search-detail">
    <div class="top">
      <img src="../assets/back.png" alt="" @click="$router.go(-1)">
      <span>为你找到以下结果</span>
    </div>
    <div class="play-all">
      <img src="../assets/play.png" alt="">
      <div class="title">播放全部</div>
      <div class="num">(共{{state.songs.length}}首)</div>
    </div>
    <div class="play-list">
      <div class="play-item" v-for="item in state.songs" :key="item.id" @click="changeId(item.id)">
        <div class="left">
          <div class="title">{{item.name}}</div>
          <span class="author" v-for="author in item.artists" :key="author.id">{{author.name}} &nbsp;</span>
        </div>
        <div class="right">
          <img src="../assets/play.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCurrentInstance, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'

export default {
  setup() {
    const { proxy } = getCurrentInstance()
    const route = useRoute()
    const store = useStore()

    // 定义需要的数据
    const state = reactive({ songs: [] })

    // 发送请求
    proxy.$http.get(`/search?keywords=${route.query.keywords}`).then(res => {
      if (res.code === 200) {
        state.songs = res.result?.songs ?? []
      }
    })

    // 点击事件
    const changeId = id => {
      store.commit('setSongId', id)
    }

    return {
      state,
      changeId
    }
  }
}
</script>

<style lang="less" scoped>
.search-detail {
  font-size: 0.4rem;
  img {
    height: 0.7rem;
    width: 0.7rem;
  }
  .top {
    display: flex;
    align-items: center;
    padding: 0.2rem;
    span {
      flex: 1;
      text-align: center;
    }
  }
  .play-all {
    display: flex;
    align-items: center;
    padding: 0.2rem;
    .title {
      margin-left: 0.2rem;
      font-weight: 600;
    }
    .num {
      font-size: 0.3rem;
      color: #ccc;
    }
  }
  .play-list {
    width: 7.5rem;
    margin-bottom: 1.3rem;
    .play-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.2rem;
      border-bottom: 1px solid #ccc;
      margin-bottom: 0.1rem;
      .left {
        .author {
          font-size: 0.3rem;
          color: #ccc;
        }
      }
    }
  }
}
</style>